<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .block{
            display: block;
        }

        .inline {
            display: inline;
            background-color: aquamarine;
            padding: 20px; 
        }

        .inlineBlock {
            display: inline-block;
        }

    </style>
</head>
<body>
    <div class="block">块级元素：独占一行，换行符，能设置宽高，margin、padding水平垂直方向均有效</div>
    <span>456</span>
    
    <div class="inline">行内元素：多个在一行显示，无换行符，不能设置宽高，margin垂直方向无效，padding水平垂直方向均有效</div>
    <span>456</span>
    
    <div class="inlineBlock">行内块元素：多个在一行显示，换行符，能设置宽高，margin、padding水平垂直方向均有效</div>
    <span>456</span>

</body>
</html>